<script src="__PUBLIC__/js/autocomplete/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="__PUBLIC__/js/autocomplete/jquery.autocomplete.css" />
<style>
#selected_user_list { font-size: 12px; text-align: left;}
#selected_user_list dl{ margin: 0px; padding:0 }
#selected_user_list dt{ background-color: #F0F0F0; line-height: 24px; margin: 0px; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; clear: both; }
#selected_user_list dd{ color: #666; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #DDDDDD; margin: 0px; line-height: 24px; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; clear: both; height: 24px; margin-bottom:5px;}
#selected_user_list dd .del{ background: url(../images/ico_del.gif) no-repeat 0px 0px; text-indent: 999px; white-space: nowrap; display: inline-block; width: 12px; overflow: hidden; height: 12px; margin-top: 5px; margin-right: 5px; }


</style>
<div id="selected_user_list">
 <dl id="attentionList">
      <dt>
      	<php>
      		$userId = array_filter($userId);
			if(is_array($userId)){
				$userCount = empty($userId)?0:count($userId);
			}else{
				$userCount = empty($userId)?0:1;
			}
      	</php>
		
        <span class="R" id="select_count_num">
        	{:L('search_select_user',array('[user]'=>$userCount))}
        </span>
 			{:L('search_select_user_info')}
      </dt>
     <php>if(isset($user)){</php>
     		<volist name="user" id="vo" key="key">
      			 <dd class="on" id="li_{$vo.uname}">
        			<a href="javascript:void(0)" onclick="deleteUser('{$vo.uname}',{$vo.uid})" class="delR mt5" title="{:L('common_delete')}">{:L('common_delete')}</a><span id="info_{$vo.uname}">{$vo.fullname}</span>
				</dd>
        	</volist>
      <php>}</php>
    </dl>
</div>
<div style="width:100%;" class="cl03 lh22" >{:L('search_info')}</div>

<div class="ui-fs" id="ui-fs" style=>
	<div class="ui-fs-input">
		<input type="text" name="{$name}" id="ts_search_handle" style="width: 99%" class="mt10 {$class}"/>
		<a title="{:L('search_colleague_group')}" href="javascript:void(0)" onclick="selectGroup()" id="select_group_handle" class="ui-fs-icon" style="display:none;"> </a>
	</div>

	<div class="ui-fs-all" id="ui-fs-all-handle" style="display:none">
		<div class="top">
		<php>if($grouplist){</php>	
			{:L('search_colleague_group')}：<select id="ui-fs-friendtype">
						<volist id="vo" name="grouplist">
							<option value="{$key}">{$vo}</option>
						</volist>
					</select> 
					<div style="height:15px;text-align:right;">
						<a href="javascript:void(0)" style=";width:40px;text-align:center;height:20px">{:L('common_add')}</a>
					</div>
		<php>}else{</php>
			{:L('search_not_group')}
		<php>}</php>
		</div>
	</div>
</div>
<input type="hidden" name="{$name}_uids" id="ts_search_value" value="<php>if(is_array($userId)){ echo implode(',',$userId);}else{echo $userId ;}</php>" />
<input type="hidden" name="{$name}_noReg" id="ts_noReg_value" />
<div id="ts_searchhandle_tip" style="display:none">&nbsp;</div>
<div id="ts_search_save_data" style="display:none" />
<script type="text/javascript"> 
var search_data = $('#ts_search_save_data');

$("#ts_search_handle").autocomplete('{:U("home/User/dosearch")}&reg={$reg|intval}', {
    minChars: 2,
    width:550,
	max:30,
	listenKey:13,    //13
    matchContains: true,
    autoFill: false,
	delay:100,
	selectFirst: true,
	dataType: 'json',
    parse:function(data){
	     var d=data;
	     var rows=new Array();
		 if( d ){
		     for(var i=0;i<d.length;i++){
		      	rows[rows.length]={data:d[i],value:d[i].name,result:d[i].cn,type:d[i].type}
		     }
		     return rows;
		}else{
			return '';
		}
    }, 
    formatItem: function(data) {
	   if(data.type=='group'){
	   		return '<img src="__PUBLIC__/js/autocomplete/colleague_icon.gif" height="15" width="15">&nbsp;&nbsp;' + data.cn + " [" + data.department + "]";
	   }else{
	   		return data.cn + " [" + data.department + "]";
	   }
       
    },
	onselected: function(row){
		search_doselected( row.data );
	},
	nosearchvalue: function(value){
		search_ShowTip( '{:L('search_not_user')}'+value );
		$("#ts_search_handle").val('');
	}
});




function selectGroup(){
	if( $('#select_group_handle').hasClass('active') ){
		$('#select_group_handle').removeClass('active');
		$('#ui-fs-all-handle').hide();
	}else{
		$('#select_group_handle').addClass('active');
		$('#ui-fs-all-handle').show();
	}
}

/*
*  方法:Array.remove(dx) 通过遍历,重构数组
*  功能:删除数组元素.
*  参数:dx删除元素的下标.
*/
Array.prototype.remove=function(dx)
{
    if(isNaN(dx)||dx>this.length){return false;}
    for(var i=0,n=0;i<this.length;i++)
    {
        if(this[i]!=this[dx])
        {
            this[n++]=this[i]
        }
    }
    this.length-=1
} 		
//已激活用户ID
var hasSelectedUserId = new Array();
//未激活用户工号
var hasSelectedNotRegUserId = new Array();
//已选用户组ID
var hasSelectedGroupId = new Array();

var hasSelectedUids    = new Array();

var select_group_to_uids   = new Array();

<php>if(isset($userId)){</php>
		<php>
			if(is_array($userId)){
				foreach($userId as $value){
		</php>
			hasSelectedUids.push( '{$value}' );
		<php>}}else{</php>
				hasSelectedUids.push( '{$userId}' );
		<php>}</php>
<php>}</php>


//选择列处理数据
function search_doselected(data){
	switch(data.type){
		case 'webuser':  //已激活用户
			if( $.inArray( data.uid , hasSelectedUserId ) != -1 ){
				search_ShowTip( '{:L('search_user')} " '+ data.fullname +' " {:L('search_user_has_add')} ' );
			}else{	
				hasSelectedUids.push( data.uid );
				search_recombine();
				appendUserHtml( data );	
			}
		break;
		
		case 'group':    //同事分组
			if( $.inArray( data.id , hasSelectedGroupId ) != -1 ){
				search_ShowTip( '{:L('search_group')} " '+ data.cn +' " {:L('search_user_has_add')} ' );
			}else if(data.uid==''){
				search_ShowTip( '{:L('search_group')} " '+ data.cn +' " {:L('search_zero_user')} ' );
			}else{	
				hasSelectedGroupId.push( data.id );  //添加群组
				if( data.uid ){
					var uids = data.uid.split(',');
					search_data.data("g_"+data.id,uids);	
					search_recombine();
				}	
				appendUserHtml( data );		
			}		
		break;
		
		default: // 其它
			if( $.inArray( data.short , hasSelectedNotRegUserId ) != -1 ){
				search_ShowTip( '{:L('search_user')} "'+ data.cn +'" {:L('search_user_has_add')} ' );
			}else{
				hasSelectedNotRegUserId.push( data.short );
				$("#ts_noReg_value").val(hasSelectedNotRegUserId);
				search_recombine();
				appendUserHtml( data );	
			}
		break;
	}
	
	
	$("#ts_search_handle").val('');
}

//重组数据
function search_recombine(){
	hasSelectedUserId = new Array();
	$.each(hasSelectedGroupId,function(i,n){
		if( search_data.data('g_'+n) != 'undefined' ){
			$.merge( hasSelectedUserId , search_data.data('g_'+n) );
		}
	})
	$.merge( hasSelectedUserId , hasSelectedUids );
	$('#select_count_num').html('{:L('search_has_select')}  <font color="red">'+ ( hasSelectedUserId.length + hasSelectedNotRegUserId.length ) +'</font> {:L('search_human')}');
	$.unique( hasSelectedUserId );
	$("#ts_search_value").val(hasSelectedUserId);
}

//向列表中添加项
function appendUserHtml(data){
	var html = '';
	if( data.type=='group'){
		html += ' <dd class="on" id="li_'+data.short+'" class="">\
        			 <a href="javascript:void(0)" onclick=\'deleteGroup("'+data.short+'",'+ data.id +')\' class="delR mt5" title="{:L('common_delete')}">{:L('common_delete')}</a><span id="info'+ data.short +'"><img src="__PUBLIC__/js/autocomplete/colleague_icon.gif" height="10" width="10">&nbsp;'+data.cn +' ' + data.department + '</span></dd>';
	}else if(data.type=='webuser'){
		html += ' <dd class="on" id="li_'+data.short+'">\
        <a href="javascript:void(0)" onclick=\'deleteUser("'+data.short+'",'+ data.uid +')\' class="delR mt5" title="{:L('common_delete')}">{:L('common_delete')}</a><span id="info_'+ data.short +'" uid="'+ data.uid +'">'+data.fullname+ ' ' + data.sn +'</span></dd>';
	}else{
		html += ' <dd class="on" id="li_'+data.short+'">\
        <a href="javascript:void(0)" onclick=\'deleteUser("'+data.short+'",'+false+')\' class="delR mt5" title="{:L('common_delete')}">{:L('common_delete')}</a><span id="info_'+ data.short +'" uid="'+ data.uid +'">'+data.cn+'</span></dd>';		
	}
	$('#selected_user_list dl').append( html );
}

//删除某个已选项
function deleteUser(short,uid){
	if(uid != false){
		for(var j=0;j<hasSelectedUids.length;j++){
			if(uid == hasSelectedUids[j] ){
				hasSelectedUids.remove(j);
			}
		}
		search_recombine();
	}else{
		for(var j=0;j<hasSelectedNotRegUserId.length;j++){
			if(short == hasSelectedNotRegUserId[j] ){
				hasSelectedNotRegUserId.remove(j);
			}
		 }
		$("#ts_noReg_value").val(hasSelectedNotRegUserId);	
		search_recombine();
	}
	$("#li_"+short).remove();
}

function deleteGroup(short,gid){
	search_data.removeData('g_'+gid);
	$.each( hasSelectedGroupId , function(i,n){
		if( gid==n ){
			hasSelectedGroupId.remove(i);
		}
	});	
	search_recombine();
	$("#li_"+short).remove();
}

//搜索信息提示
function search_ShowTip(html){
	$('#ts_searchhandle_tip').html( html );
	$('#ts_searchhandle_tip').show();
	setTimeout("$('#ts_searchhandle_tip').hide()", 2000);
}

</script> 